<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家政小程序商学院 - 课程详情</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8f9fa;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .chapter-item {
            transition: all 0.3s ease;
        }
        .chapter-item:hover {
            background-color: #f1f5f9;
        }
        .fixed-bottom-bar {
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
        .rating-star {
            color: #f59e0b;
        }
        .rating-star.empty {
            color: #e5e7eb;
        }
        .banner-overlay {
            background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.5));
        }
    </style>
</head>
<body class="relative pb-20">
    <!-- 顶部导航 -->
    <div class="fixed top-0 left-0 right-0 bg-white shadow-sm z-10 max-w-750 mx-auto">
        <div class="flex items-center justify-between px-4 py-3">
            <button class="text-gray-600" onclick="history.back()">
                <i class="fas fa-arrow-left text-lg"></i>
            </button>
            <h1 class="text-lg font-semibold">课程详情</h1>
            <button class="text-gray-600">
                <i class="fas fa-share-alt text-lg"></i>
            </button>
        </div>
    </div>

    <!-- 课程封面Banner -->
    <div class="relative mt-12">
        <img src="https://s.coze.cn/image/s1FzhGVXdqc/" alt="课程封面" class="w-full h-48 object-cover">
        <div class="absolute bottom-0 left-0 right-0 p-4 banner-overlay text-white">
            <h2 class="text-xl font-bold mb-1">家政服务专业技能提升课程</h2>
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <span class="text-yellow-400 mr-1">4.8</span>
                    <div class="flex">
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star-half-alt rating-star text-sm"></i>
                    </div>
                    <span class="text-white text-xs ml-1">(128人评价)</span>
                </div>
                <div class="text-xl font-bold text-white">¥299</div>
            </div>
        </div>
    </div>

    <!-- 课程导航标签 -->
    <div class="bg-white sticky top-12 z-10 shadow-sm">
        <div class="flex border-b">
            <button class="flex-1 py-3 text-center font-medium tab-btn active" data-tab="intro">
                <span>介绍</span>
            </button>
            <button class="flex-1 py-3 text-center font-medium tab-btn" data-tab="outline">
                <span>大纲</span>
            </button>
            <button class="flex-1 py-3 text-center font-medium tab-btn" data-tab="teacher">
                <span>讲师</span>
            </button>
            <button class="flex-1 py-3 text-center font-medium tab-btn" data-tab="reviews">
                <span>评价</span>
            </button>
        </div>
    </div>

    <!-- 课程介绍区 -->
    <div id="intro" class="tab-content active bg-white p-4">
        <div class="mb-6">
            <h3 class="text-lg font-semibold mb-3 flex items-center">
                <i class="fas fa-bullseye text-blue-500 mr-2"></i>学习目标
            </h3>
            <p class="text-gray-600">本课程旨在帮助学员掌握家政服务的核心技能，包括清洁技巧、收纳整理、烹饪基础、老人儿童照护等，全面提升家政服务专业水平。</p>
        </div>
        
        <div class="mb-6">
            <h3 class="text-lg font-semibold mb-3 flex items-center">
                <i class="fas fa-users text-green-500 mr-2"></i>适合人群
            </h3>
            <ul class="list-disc pl-5 text-gray-600 space-y-1">
                <li>希望从事家政服务行业的新手</li>
                <li>想提升专业技能的在职家政人员</li>
                <li>家庭主妇/主夫想提升家务能力</li>
                <li>对家政服务感兴趣的人群</li>
            </ul>
        </div>
        
        <div>
            <h3 class="text-lg font-semibold mb-3 flex items-center">
                <i class="fas fa-graduation-cap text-purple-500 mr-2"></i>学习收获
            </h3>
            <ul class="list-disc pl-5 text-gray-600 space-y-1">
                <li>掌握10种以上专业清洁技巧</li>
                <li>学会高效收纳整理的5大原则</li>
                <li>掌握基础烹饪技能和营养搭配</li>
                <li>了解老人和儿童照护的基本要点</li>
                <li>获得家政服务行业认证证书</li>
            </ul>
        </div>
    </div>

    <!-- 课程大纲区 -->
    <div id="outline" class="tab-content bg-white p-4">
        <div class="space-y-3">
            <div class="chapter-item border rounded-lg overflow-hidden">
                <div class="flex justify-between items-center p-3 bg-gray-50">
                    <div class="flex items-center">
                        <i class="fas fa-play-circle text-blue-500 mr-2"></i>
                        <span class="font-medium">第一章：家政服务基础</span>
                    </div>
                    <button class="expand-btn text-gray-500">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                </div>
                <div class="chapter-content hidden px-3 pb-3">
                    <div class="pl-8 pt-2 space-y-2">
                        <div class="flex items-center py-1">
                            <span class="w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-xs flex items-center justify-center mr-2">1</span>
                            <span>家政服务行业概述</span>
                        </div>
                        <div class="flex items-center py-1">
                            <span class="w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-xs flex items-center justify-center mr-2">2</span>
                            <span>职业素养与礼仪</span>
                        </div>
                        <div class="flex items-center py-1">
                            <span class="w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-xs flex items-center justify-center mr-2">3</span>
                            <span>安全与卫生规范</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="chapter-item border rounded-lg overflow-hidden">
                <div class="flex justify-between items-center p-3 bg-gray-50">
                    <div class="flex items-center">
                        <i class="fas fa-play-circle text-blue-500 mr-2"></i>
                        <span class="font-medium">第二章：专业清洁技巧</span>
                    </div>
                    <button class="expand-btn text-gray-500">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                </div>
                <div class="chapter-content hidden px-3 pb-3">
                    <div class="pl-8 pt-2 space-y-2">
                        <div class="flex items-center py-1">
                            <span class="w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-xs flex items-center justify-center mr-2">1</span>
                            <span>不同材质的清洁方法</span>
                        </div>
                        <div class="flex items-center py-1">
                            <span class="w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-xs flex items-center justify-center mr-2">2</span>
                            <span>高效清洁工具使用</span>
                        </div>
                        <div class="flex items-center py-1">
                            <span class="w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-xs flex items-center justify-center mr-2">3</span>
                            <span>顽固污渍处理技巧</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="chapter-item border rounded-lg overflow-hidden">
                <div class="flex justify-between items-center p-3 bg-gray-50">
                    <div class="flex items-center">
                        <i class="fas fa-play-circle text-blue-500 mr-2"></i>
                        <span class="font-medium">第三章：收纳整理艺术</span>
                    </div>
                    <button class="expand-btn text-gray-500">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                </div>
                <div class="chapter-content hidden px-3 pb-3">
                    <div class="pl-8 pt-2 space-y-2">
                        <div class="flex items-center py-1">
                            <span class="w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-xs flex items-center justify-center mr-2">1</span>
                            <span>空间规划原则</span>
                        </div>
                        <div class="flex items-center py-1">
                            <span class="w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-xs flex items-center justify-center mr-2">2</span>
                            <span>衣物收纳技巧</span>
                        </div>
                        <div class="flex items-center py-1">
                            <span class="w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-xs flex items-center justify-center mr-2">3</span>
                            <span>厨房收纳方案</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 讲师信息区 -->
    <div id="teacher" class="tab-content bg-white p-4">
        <div class="flex items-start mb-4">
            <img src="https://s.coze.cn/image/qDLtfEOlRb8/" alt="讲师头像" class="w-20 h-20 rounded-full object-cover mr-4 border-2 border-white shadow">
            <div>
                <h3 class="text-lg font-semibold">张老师</h3>
                <p class="text-gray-500 text-sm">家政服务高级培训师</p>
            </div>
        </div>
        
        <div class="mb-4">
            <h4 class="font-medium text-gray-700 mb-2">讲师简介</h4>
            <p class="text-gray-600 text-sm leading-relaxed">
                张老师拥有10年家政服务行业经验，5年专业培训经验。曾任职于多家知名家政公司技术总监，培养出数百名优秀家政服务人员。擅长将复杂的家政技巧简化为易学易懂的教学内容，深受学员喜爱。
            </p>
        </div>
        
        <div>
            <h4 class="font-medium text-gray-700 mb-2">擅长领域</h4>
            <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-xs">专业清洁</span>
                <span class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-xs">收纳整理</span>
                <span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-full text-xs">烹饪技巧</span>
                <span class="px-3 py-1 bg-yellow-50 text-yellow-600 rounded-full text-xs">老人照护</span>
                <span class="px-3 py-1 bg-pink-50 text-pink-600 rounded-full text-xs">儿童看护</span>
            </div>
        </div>
    </div>

    <!-- 学员评价区 -->
    <div id="reviews" class="tab-content bg-white p-4">
        <div class="flex items-center justify-between mb-6 p-3 bg-gray-50 rounded-lg">
            <div class="text-center">
                <div class="text-2xl font-bold text-yellow-500">4.8</div>
                <div class="flex justify-center mt-1">
                    <i class="fas fa-star rating-star text-sm"></i>
                    <i class="fas fa-star rating-star text-sm"></i>
                    <i class="fas fa-star rating-star text-sm"></i>
                    <i class="fas fa-star rating-star text-sm"></i>
                    <i class="fas fa-star-half-alt rating-star text-sm"></i>
                </div>
                <div class="text-xs text-gray-500 mt-1">128条评价</div>
            </div>
            
            <div class="w-px h-12 bg-gray-200"></div>
            
            <div class="space-y-2">
                <div class="flex items-center">
                    <span class="text-xs text-gray-500 w-10">5星</span>
                    <div class="w-24 h-2 bg-gray-200 rounded-full mx-2">
                        <div class="h-full bg-yellow-400 rounded-full" style="width: 85%"></div>
                    </div>
                    <span class="text-xs text-gray-500">85%</span>
                </div>
                <div class="flex items-center">
                    <span class="text-xs text-gray-500 w-10">4星</span>
                    <div class="w-24 h-2 bg-gray-200 rounded-full mx-2">
                        <div class="h-full bg-yellow-400 rounded-full" style="width: 12%"></div>
                    </div>
                    <span class="text-xs text-gray-500">12%</span>
                </div>
                <div class="flex items-center">
                    <span class="text-xs text-gray-500 w-10">3星</span>
                    <div class="w-24 h-2 bg-gray-200 rounded-full mx-2">
                        <div class="h-full bg-yellow-400 rounded-full" style="width: 3%"></div>
                    </div>
                    <span class="text-xs text-gray-500">3%</span>
                </div>
            </div>
        </div>
        
        <div class="space-y-4">
            <div class="border-b pb-4">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <div class="font-medium">李女士</div>
                        <div class="text-xs text-gray-500">2024-03-15</div>
                    </div>
                    <div class="flex">
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                    </div>
                </div>
                <p class="text-gray-600 text-sm">
                    课程内容非常实用，老师讲解得很细致，特别是清洁技巧部分，让我学到了很多专业方法。现在做家务效率提高了不少，强烈推荐！
                </p>
            </div>
            
            <div class="border-b pb-4">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <div class="font-medium">王先生</div>
                        <div class="text-xs text-gray-500">2024-02-28</div>
                    </div>
                    <div class="flex">
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                    </div>
                </div>
                <p class="text-gray-600 text-sm">
                    作为一名新手家政人员，这门课程对我帮助很大。收纳整理的部分特别有用，现在能更好地为客户规划储物空间了。老师经验丰富，回答问题很有耐心。
                </p>
            </div>
            
            <div class="border-b pb-4">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <div class="font-medium">赵女士</div>
                        <div class="text-xs text-gray-500">2024-01-10</div>
                    </div>
                    <div class="flex">
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star rating-star text-sm"></i>
                        <i class="fas fa-star-half-alt rating-star text-sm"></i>
                    </div>
                </div>
                <p class="text-gray-600 text-sm">
                    课程整体不错，特别是老人照护部分很实用。如果能增加一些实际操作视频演示就更好了。价格合理，物有所值。
                </p>
            </div>
        </div>
        
        <button class="w-full mt-4 py-2 text-center text-blue-500 border border-blue-500 rounded-lg text-sm">
            加载更多评价
        </button>
    </div>

    <!-- 底部固定操作栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg py-3 px-4 max-w-750 mx-auto fixed-bottom-bar">
        <div class="flex items-center justify-between">
            <div>
                <div class="text-xs text-gray-500">课程价格</div>
                <div class="text-xl font-bold text-red-500">¥299</div>
            </div>
            
            <div class="flex space-x-3">
                <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700">
                    <i class="fas fa-share-alt mr-1"></i>分享
                </button>
                <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                    <i class="fas fa-shopping-cart mr-1"></i>立即报名
                </button>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg z-10 max-w-750 mx-auto hidden">
        <div class="flex justify-around py-2">
            <a href="#" class="flex flex-col items-center text-blue-500">
                <i class="fas fa-home text-lg"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="#" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-book text-lg"></i>
                <span class="text-xs mt-1">课程</span>
            </a>
            <a href="#" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-comments text-lg"></i>
                <span class="text-xs mt-1">社区</span>
            </a>
            <a href="#" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-user text-lg"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </div>

    <script>
        // 标签页切换
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除所有标签的active类
                document.querySelectorAll('.tab-btn').forEach(tab => {
                    tab.classList.remove('active');
                });
                // 给当前点击的标签添加active类
                this.classList.add('active');
                
                // 隐藏所有内容区
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                });
                // 显示对应的内容区
                const tabId = this.getAttribute('data-tab');
                document.getElementById(tabId).classList.add('active');
            });
        });

        // 章节展开/折叠
        document.querySelectorAll('.expand-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const chapterItem = this.closest('.chapter-item');
                const content = chapterItem.querySelector('.chapter-content');
                const icon = this.querySelector('i');
                
                if (content.classList.contains('hidden')) {
                    content.classList.remove('hidden');
                    icon.classList.remove('fa-chevron-down');
                    icon.classList.add('fa-chevron-up');
                } else {
                    content.classList.add('hidden');
                    icon.classList.remove('fa-chevron-up');
                    icon.classList.add('fa-chevron-down');
                }
            });
        });

        // 报名按钮点击事件
        document.querySelector('.fixed-bottom-bar button.bg-blue-500').addEventListener('click', function() {
            // alert('即将跳转到报名页面');
            // 实际应用中这里应该是跳转到报名页面的代码
            // window.location.href = '/signup';
            window.location.href = './course-enrollment.html';
        });
    </script>
</body>
</html>